<template>
	<el-dialog title="出库单" v-model="visible" :close-on-click-modal="false" draggable width="860px">
		<div id="exportId" class="px-4">
			<div class="py-2 mb-2 text-xl font-semibold text-center">{{ form.deptName }}</div>
			<el-row :gutter="24">
				<el-col :span="12" class="mb-4">
					<div class="flex items-center">
						<span class="min-w-[100px] text-right text-info">客户名称：</span>
						<span>{{ form.customerDeptName }}</span>
					</div>
				</el-col>
				<el-col :span="12" class="mb-4">
					<div class="flex items-center pl-[24px]">
						<span>【</span>
						<span>短信：</span>
						<span>{{ form.smsNum === 999999 ? '不限制' : form.smsNum }}</span>
						<span v-if="form.smsNum !== 999999">条，</span>
						<span>语音：</span>
						<span>{{ form.ttsNum === 999999 ? '不限制' : form.ttsNum }}</span>
						<span v-if="form.ttsNum !== 999999">分钟，</span>
						<span>年限：</span>
						<span>{{ form.platformYears }}</span>
						<span>年</span>
						<span>】</span>
					</div>
				</el-col>
				<el-col :span="12" class="mb-4">
					<div class="flex items-center">
						<span class="min-w-[100px] text-right text-info">出库时间：</span>
						<span>{{ form.createTime }}</span>
					</div>
				</el-col>
				<el-col :span="12" class="mb-4">
					<div class="flex items-center">
						<span class="min-w-[100px] text-right text-info">出库编号：</span>
						<span>{{ form.outInventoryNumber }}</span>
					</div>
				</el-col>
			</el-row>
			<el-table
				:data="form.basicDevice"
				v-loading="state.loading"
				border
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
				size="small"
			>
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column prop="imei" label="IMEI" show-overflow-tooltip width="180" />
				<el-table-column prop="deviceType" label="设备类型" show-overflow-tooltip width="150" />
				<el-table-column prop="deviceModelName" label="型号" show-overflow-tooltip />
			</el-table>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleExport" type="primary">导出</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="BasicInventoryHistoryDetailDialog">
import { getObj } from '/@/api/platform/basicInventoryList';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { getPdf } from '/@/utils/lib/html2pdf';

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);
// 定义字典

// 提交表单数据
const form = reactive({
	id: '',
	deviceId: '',
	deptId: '',
	deptName: '',
	deliveryMethod: '',
	deliveryNum: '',
	customerDeptName: '',
	outInventoryNumber: '',
	createTime: '',
	platformYears: 0,
	smsNum: 0,
	ttsNum: 0,
	basicDevice: [],
});
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	createdIsNeed: false,
	pagination: {},
});
//  table hook
const { tableStyle } = useTable(state);

// 打开弹窗
const openDialog = (id: string) => {
	visible.value = true;
	form.outInventoryNumber = '';
	form.basicDevice = [];

	// 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});

	// 获取basicExpensesDviceConfig信息
	if (id) {
		form.outInventoryNumber = id;
		getbasicExpensesDviceConfigData(id);
	}
};

// 初始化表单数据
const getbasicExpensesDviceConfigData = (id: string) => {
	// 获取数据
	loading.value = true;
	getObj(id)
		.then((res: any) => {
			Object.assign(form, res.data);
		})
		.finally(() => {
			loading.value = false;
		});
};
const handleExport = () => {
	const title: string = form.outInventoryNumber + '_' + form.customerDeptName;
	getPdf('exportId', title);
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>
